<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
</head>
<body>
    <!-- 事件源 -->
    <button style="font-size: 36px;" onclick="alert('hello world')">点击1</button>
    <!-- 时间监听：绑定事件，触发事件
        1.HTML属性中提供了on+事件类型 :耦合性高，代码复用率低
        2.DOM0绑定事件：对象，属性（on+事件类型）=事件处理函数
        3.DOM0绑定事件：对象，方法（）；
    -->
    <button class="ck">点击2</button>
    <script>
        //第一步：获取元素节点
        const btn = document.querySelector('.ck');
        //对，属性：事件处理程序（函数）；
        btn.onclick = function(){
            alert('hello btn2');
        }
        btn.onclick = null; //移除事件
    </script>
    <button id="btn">点击3</button>
    <script>
        const ck = document.querySelector('#btn');
        //添加事件监听（函数）addEventListener("事件类型"，"事件处理函数"，[true/false]);
        //事件类型不需要前缀on
        ck.addEventListener('click',test);
        ck.removeEventListener('click',test);
        let test = function(){
            alert('hello btn3');
        };
    </script>
</body>
</html>